<template>
  <h2>App</h2>
  <h3>{{ msg }}</h3>
  <!-- <h3>count:{{ count }}</h3> -->
  <button @click="msg += '==='">更新数据</button>
  <hr />
  <h2><Child :msg="msg" :msg1="真香" @xxx='xxx'/></h2>
</template>

<script>
import { defineComponent, ref } from "vue";
import Child from "./components/Child";
export default defineComponent({
  name: "App",
  components: {
    Child,
  },
  //setup不能是一个async的函数 因为返回的不在return的是一个对象  而是promise  模板看不到retrn对象中的数据   在setup中不能访问到data  中的数据 因为组件还没有创建出来
  setup() {
    function xxx(txt) {
      msg.value += txt
    }
    const msg = ref("你在肝肾");
    const showMsg2 = () => {
      console.log("setup中的msg方法");
    };
    return {
      msg,
      showMsg2,
      xxx

     
    };

  },
/*   data() {
    return {
      count: 10,
    };
  }, */
  mounted() {
    console.log(this);
  },
  methods: {
    showMsg1() {
      console.log("App methods中的showMsg方法");
    },
  },
});
</script>

<style lang="less" scoped>
</style>

